import React from 'react'
import PropTypes from 'prop-types'
import { findNodeHandle, NativeModules, requireNativeComponent, View, UIManager } from 'react-native'
import { IS_ANDROID, IS_IOS } from 'src/utils/ScreenUtil'
import PolyvVodPlayerComponent from 'src/bridge/PolyvVodPlayerModule'

// iOS启动图
export const IOSLaunchViewNative = requireNativeComponent('RNTLaunchView', View)

// iOS bugly todo

// 一键登录
export const RNTOneLogin = NativeModules.RNTOneLogin
// ios 键盘 done按钮事件
export const RNTUtils = NativeModules.RNTUtils

export const RNTPolyvLiveManager = NativeModules.RNTPolyvLiveManager
const RNTPolyvLive = requireNativeComponent('RNTPolyvLive', View)

export class PolyvLivePlayer extends React.PureComponent {
  static propTypes = {
    paused: PropTypes.bool, // 播放、暂停
    fullscreen: PropTypes.bool, // 全屏、非全屏
    showdanmu: PropTypes.bool, // 弹幕层显示、不显示
    danmumsg: PropTypes.string, // 插入弹幕
    onPlayLiveEvent: PropTypes.func // 回调：播放暖场
  }

  setNativeProps (nativeProps) {
    console.log('PolyvLivePlayer nativeProps\n', nativeProps)
    this._root.setNativeProps(nativeProps)
  }

  _assignRoot = (ref) => {
    this._root = ref
  }

  initPolyLive = (params) => {
    if (IS_ANDROID) {
      params.playType = 'LIVE'
      this._root.initConfig(params)
      this._root.initPlayLive()
    } else {
      this._root.initPolyLive(params)
    }
  }

  orientationListener = (params) => {
    if (IS_ANDROID) {
      this._root.orientationListener(params)
    }
  }

  playVideo () {
    this._root.playVideo()
  }

  setPause (paused) {
    this._root.setPause(paused)
  }

  freePlayer = () => {
    this._root.freePlayer()
  }

  render () {
    return IS_IOS ? (
      <RNTPolyvLive {...this.props} ref={this._assignRoot}/>
    ) : (
      <RNTPolyvLivePlayerView {...this.props} ref={this._assignRoot}/>
    )
  }
}

export class RNTPolyvLivePlayerView extends React.PureComponent {
  /**
   * 初始化配置
   * @param params
   */
  initConfig (params) {
    this.dispatchCommand('initConfig', JSON.stringify(params))
  }

  /**
   * 初始化直播的播放
   */
  initPlayLive () {
    this.dispatchCommand('initPlayLive', null)
  }

  /**
   * 方向监听
   */
  orientationListener (orientation) {
    this.dispatchCommand('orientationListener', JSON.stringify({ orientation }))
  }

  /**
   * 播放视频
   */
  playVideo () {
    this.dispatchCommand('playVideo', null)
  }

  setNativeProps (nativeProps) {
    // 向native层发送命令
    this.dispatchCommand('nativeProps', JSON.stringify(nativeProps))
  }

  freePlayer () {
    // 向native层发送命令
    this.dispatchCommand('freePlayer', null)
    console.info('PolyvVodView', 'freePlayer')
  }

  setPause (paused) {
    console.info('PolyvVodView', 'setPause', paused)
    this.dispatchCommand('paused', JSON.stringify({ paused }))
  }

  dispatchCommand = (commandName, params) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(this.ref),
      UIManager.getViewManagerConfig('RNTPolyvLiveView').Commands[commandName], // Commands后面的值与原生层定义的`handleTask`一致
      [params] // 向原生层传递的参数数据,数据形如：["第一个参数","第二个参数",...]
    )
  }

  _customViewRef = (ref) => {
    this.ref = ref
  }

  render () {
    return (
      <RNTPolyvLiveView
        ref={this._customViewRef}
        {...this.props}>
      </RNTPolyvLiveView>
    )
  }
}

const RNTPolyvLiveView = requireNativeComponent('RNTPolyvLiveView', RNTPolyvLivePlayerView) // 拿到Native组件

export const RNTPolyvVodManager = NativeModules.RNTPolyvVodManager

const RNTPolyvVod = requireNativeComponent('RNTPolyvVod', View)

export class PolyvVodPlayer extends React.PureComponent {
  setNativeProps (nativeProps) {
    console.log('PolyvVodPlayer nativeProps\n', nativeProps)
    this._root.setNativeProps(nativeProps)
  }

  _assignRoot = (ref) => {
    this._root = ref
  }

  updateVid = (vid) => {
    if (IS_ANDROID) {
      this._root.updateVid(vid)
    }
  }

  initPolyVod = (params) => {
    console.info('initPolyVod')
    if (IS_ANDROID) {
      params.playType = 'REPLAY'
      this._root.initConfig(params)
    } else {
      this._root.initPolyVod(params)
    }
  }

  initPlay = () => {
    this._root.initPLay()
  }

  setFullScreen = (fullScreen) => {
    this._root.setFullScreen(fullScreen)
  }

  orientationListener = (params) => {
    if (IS_ANDROID) {
      this._root.orientationListener(params)
    }
  }

  play () {
    if (IS_ANDROID) {
      this._root.play()
    }
  }

  pause = () => {
    if (IS_ANDROID) {
      this._root.pause()
    }
  }

  freePlayer = () => {
    console.info('PolyvVodView', 'freePlayer1')
    this._root.release()
  }

  render () {
    return IS_IOS ? (
      <RNTPolyvVod {...this.props} ref={this._assignRoot}/>
    ) : (<PolyvVodPlayerComponent
      {...this.props} ref={this._assignRoot} fullScreen={false} isAutoStart={false}/>)
  }
}
